<template>
  <view class="uni-group" :class="['uni-group--' + mode, margin ? 'group-margin' : '']" :style="{ marginTop: `${top}px` }">
    <slot name="title">
      <view v-if="title" class="uni-group__title" :style="{ 'padding-left': border ? '30px' : '15px' }">
        <text class="uni-group__title-text">{{ title }}</text>
      </view>
    </slot>
    <view class="uni-group__content" :class="{ 'group-conent-padding': border }">
      <slot />
    </view>
  </view>
</template>

<script lang="ts">
/**
 * Group 分组
 * @description 表单字段分组
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3281
 * @property {String} title 主标题
 * @property {Number} top 分组间隔
 * @property {Number} mode 模式
 */
export default {
  name: "uniGroup",
  emits: ["click"],
  props: {
    title: {
      type: String,
      default: "",
    },
    top: {
      type: [Number, String],
      default: 10,
    },
    mode: {
      type: String,
      default: "default",
    },
    stat: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      margin: false,
      border: false,
    };
  },
  watch: {
    title(newVal) {
      if (uni.report && this.stat && newVal !== "") {
        uni.report("title", newVal);
      }
    },
  },
  created() {
    this.form = this.getForm();
    if (this.form) {
      this.margin = true;
      this.border = this.form.border;
    }
  },
  methods: {
    /**
     * 获取父元素实例
     */
    getForm() {
      let parent = this.$parent;
      let parentName = parent.$options.name;
      while (parentName !== "uniForms") {
        parent = parent.$parent;
        if (!parent) return false;
        parentName = parent.$options.name;
      }
      return parent;
    },
    onClick() {
      this.$emit("click");
    },
  },
};
</script>
<style lang="scss">
.uni-group {
  background: #fff;
  margin-top: 10px;
  // border: 1px red solid;
}

.group-margin {
  // margin: 0 -15px;
}

.uni-group__title {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  padding-left: 15px;
  height: 40px;
  background-color: #eee;
  font-weight: normal;
  color: #666;
}

.uni-group__content {
  padding: 15px;
  // padding-bottom: 5px;
  // background-color: #FFF;
}

.group-conent-padding {
  padding: 0 15px;
}

.uni-group__title-text {
  font-size: 14px;
  color: #666;
}

.distraction {
  flex-direction: row;
  align-items: center;
}

.uni-group--card {
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.08);
}
</style>
